<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>操作管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-row>
        <a-col :span="24">
          <a-form layout="inline">
            <a-form-item label="所属部门">
              <a-tree-select
                class="selectInputWidth"
                v-model="searchForm.deptId"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="请选择部门"
                :load-data="onLoadData"
                :tree-data="deptTreeData"
                :tree-default-expanded-keys="defaultExpandedKeys"
              ></a-tree-select>
            </a-form-item>
            <a-form-item label="操作姓名">
              <a-input v-model="searchForm.name" />
            </a-form-item>

            <a-form-item>
              <a-button type="primary" @click="handleSubmit1">查询</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="handleAdd">＋ 添加操作员</a-button>
            </a-form-item>
          </a-form>

          <a-table
            :columns="columns"
            :data-source="tableData"
            class="tableMargin"
            :pagination="pagination"
            rowKey="uiId"
            :loading="loading"
          >
            <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
            <span slot="head" slot-scope="record">
              <a-avatar size="large" :src="record.headPortrait || defaultAvatar" />
            </span>
            <template slot="opt" slot-scope="text, record">
              <a @click="removeIt(record.uiId)">移除</a>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </div>
    <sales-person-modal
      :visible="visible"
      data-role="CONTAINER_OPR"
      @set-visible="setVisible"
      @select-sales-person="selectSalesPerson"
    />
  </div>
</template>

<script>

import { queryDeptDown } from '@/api'
import { queryDeptList } from '@/api/systemPersonnelManage'
import { queryOprUserListContainer } from '@/api/orderCenter'
import { deleteSellExamine, addSellExamine } from '@/api/salesCenter'
import ChooseSalesPerson from '@/page/chooseSalesPerson'
import defaultAvatar from '@/../static/images/defaultAvatar.png'

const handleTree = (tree, rspData) => {
  rspData.forEach(v => {
    let t = []
    if (v.childList) {
      handleTree(t, v.childList)
    }
    tree.push({
      title: v.name,
      value: v.deptId,
      key: v.deptId,
      children: t
    })
  })
}

export default {
  data () {
    return {
      defaultAvatar,
      defaultExpandedKeys: [],
      deptTreeData: [],
      loading: false,
      searchForm: {
        deptId: null,
        name: ''
      },
      columns: [{
        title: '序号',
        width: 90,
        scopedSlots: { customRender: 'rn' }
      }, {
        width: 60,
        scopedSlots: { customRender: 'head' }
      }, {
        title: '姓名',
        dataIndex: 'name',
        ellipsis: true
      }, {
        title: '职务',
        dataIndex: 'position',
        ellipsis: true
      }, {
        title: '所属部门',
        dataIndex: 'deptName',
        ellipsis: true
      }, {
        title: '操作',
        width: 100,
        scopedSlots: { customRender: 'opt' }
      }],
      tableData: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10,
      visible: false
    }
  },
  components: {
    [ChooseSalesPerson.name]: ChooseSalesPerson
  },
  methods: {
    onLoadData (treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children && treeNode.dataRef.children.length > 0) {
          resolve()
          return
        }
        queryDeptList({ parentId: treeNode.dataRef.key }).then(rsp => {
          let childrenData = []
          rsp.data.forEach((value) => {
            childrenData.push({
              title: value.name,
              key: value.deptId,
              value: value.deptId
            })
          })
          treeNode.dataRef.children = childrenData
          this.deptTreeData = [...this.deptTreeData]
          resolve()
        })
      })
    },
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      this.loading = true
      queryOprUserListContainer({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.loading = false
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      }).catch(() => { this.loading = false })
    },
    handleAdd () {
      if (!this.$root._bc.create) {
        this.$message.error('您无此权限！')
        return
      }
      this.visible = true
    },
    removeIt (uiId) {
      if (!this.$root._bc.drop) {
        this.$message.error('您无此权限！')
        return
      }
      let _t = this
      this.$confirm({
        title: '将该账号从操作列表中移除后，该账号无法进行订单处理业务操作，确认移除？',
        onOk () {
          deleteSellExamine({ uiId, 'dataRole': 'CONTAINER_OPR' }).then(rsp => {
            _t.$message.success('移除成功')
            _t.handleSubmit()
          })
        }
      })
    },
    setVisible (visible) {
      this.visible = visible
    },
    selectSalesPerson (userIds) {
      addSellExamine({ userIds, dataRole: 'CONTAINER_OPR' }).then(rsp => {
        this.$message.success('添加成功')
        this.visible = false
        this.handleSubmit()
      })
    }
  },
  created () {
    queryDeptDown({
      type: 2, // type 1判断权限 2不判断
      dataRole: 'CONTAINER_SELL'
    }).then(rsp => {
      let initData = []
      rsp.data.forEach((value, index) => {
        initData.push({
          title: value.name,
          key: value.deptId,
          value: value.deptId
        })
      })
      this.deptTreeData = [...initData]
      this.searchForm.deptId = this.deptTreeData[0].key

      this.handleSubmit()
    })
  }
}
</script>

<style lang="less" scoped>
.descData {
  text-align: right;
  color: #000000d9;
}
</style>
